<template>
    <el-row class="home" :gutter="20">
        <!--热门推荐-->
        <el-col :span="16" style="margin-top: 20px">
            <!--题目头部-->
            <el-card>
                <h1 style="padding-top: 20px"><span style="margin: 10px;color: rgb(103,194,58)">Java</span>在线编程系统</h1>
                <h2><span style="color: #DAAD86">小白</span>也能轻松<span style="color: rgb(103,194,58)">编程</span></h2>

                <el-divider></el-divider>

                <h3>热门推荐</h3>
                <el-card shadow="hover" v-for="it in tableData">
                    <div class="up-box">
                        <div>
                            <i class="el-icon-s-management" style="padding-right: 10px"></i>
                            <span>{{it.name}}</span>
                        </div>
                        <div>
                            <el-button
                                    type="success"
                                    effect="dark"
                                    size="small"
                                    @click="enterQuestion(it)">
                                进入
                            </el-button>
                        </div>
                    </div>

                    <div class="down-box">
                        <div>做题人数：<span>{{it.doNum}}</span></div>
                        <div>
                            <i class="el-icon-user" style="padding-right: 10px"></i>
                            <span>{{it.author}}</span>
                        </div>
                    </div>
                </el-card>
            </el-card>
        </el-col>

        <!--其他统计信息概要-->
        <el-col :span="8" style="margin-top: 20px">
            <el-card>
                <h3 style="color: #DAAD86">网站浏览人数</h3>

                <el-divider></el-divider>

                <p><span style="font-weight: bold; font-size: 40px">{{host.visitedNum}}</span>人</p>
            </el-card>
            <el-card style="margin-top: 20px">
                <h3 style="color: #DAAD86">题目数量</h3>

                <el-divider></el-divider>

                <p><span style="font-weight: bold; font-size: 40px">{{host.questionNum}}</span>道</p>
            </el-card>
            <el-card style="margin-top: 20px">
                <h3 style="color: #DAAD86">用户数</h3>

                <el-divider></el-divider>

                <p><span style="font-weight: bold; font-size: 40px">{{host.userNum}}</span>个</p>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    //axios
    import axios from 'axios'

    export default {
        name: "HostView",
        data(){
            return {
                tableData: [],
                score: [],  //获取题目集的分数
                status: '', //题目集状态
                host: {
                    visitedNum: 0,
                    questionNum: 0,
                    userNum: 0
                },
                doNum: [],  //做题人数集
            }
        },
        methods: {
            enterQuestion(data){
                //获取题目集id
                var collectionId = data.id;
                //跳转到对应的题目页面
                this.$router.push({
                    path: '/admin/problem/manage',
                    query: {id: collectionId}
                })
            }

        },
        created: function () {
            //token
            let token = localStorage.getItem('token');

            //初始化表格数据
            //TODO 后面还需要修改，分为全部和我的
            //TODO 这里是查询条件
            let params = {};
            var that = this;

            //发送请求
            /*
                接口: 获取全部题目集
                请求地址: http://localhost:8881/producer/qcollection/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */

            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/qcollection/select',
                data: params,
                headers: {
                    token: token
                }
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.tableData = res.data.collectionList;

                    //请求题目集下的做题人数
                    /*
                        接口: 获取题目集下的做题人数
                        请求地址: http://localhost:8881/producer/qcollection/donum
                        请求方法: get
                        请求参数: 题目集id
                        响应内容: 响应结果
                    */
                    var ids = ""
                    var list = that.tableData;
                    for(var i = 0; i < list.length; i++){
                        ids = (i == 0) ? ids + list[i].id : ids + '&' + list[i].id;
                    }

                    axios({
                        method: 'get',
                        url: 'http://localhost:8881/producer/qcollection/donum',
                        params: {ids: ids},
                        headers: {
                            token: token
                        }
                    }).then(function (response) {
                        var res = response.data;
                        if(res.code == 200){
                            that.doNum = res.data.donumList;
                        }else{
                            that.$message.error('数据获取失败！');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //发送请求
            /*
                接口: 获取主页数据
                请求地址: http://localhost:8881/producer/statistic/host
                请求方法: get
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'get',
                url: 'http://localhost:8881/producer/statistic/host',
                params: {},
                headers: {
                    token: token
                }
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.host = res.data.host;
                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //访问网站
            /*
                接口: 请求后端
                请求地址: http://localhost:8881/producer/statistic/set/enter
                请求方法: get
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'get',
                url: 'http://localhost:8881/producer/statistic/set/enter',
                params: {},
                headers: {
                    token: token
                }
            }).then(function (response) {
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style scoped>
    .up-box, .down-box, up-card, down-card{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>